<html>

<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;
  }

tbody td {
  font-size: 12px;
}

tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>


<div ng-app="myApp" ng-controller="ListEmpMstCtrl">
 <h3>Employee Master</h3> <!--class = "well" -->
 <form  novalidate name="UpdateEmpMstForm" id="update-emp-form" method="post" action="">
  <table>
   <tr>
    <td>Type :<select name = "designation" ng-model="newemployeemast.designation">
        <option id="EMPLOYEE">EMPLOYEE</option> 
		<option id="TRAINEE">TRAINEE</option>
    </select>
     </td>
    <td>Prefix :<select name="prefx" ng-model="newemployeemast.prefx">
      <option id="Mr">Mr</option> 
	  <option id="Mrs">Mrs</option>  </select>
     <!-- {{selectedItem | json}} -->
    </td> 
	<td>Name : <input type="text" name="empname" ng-model="newemployeemast.empname" capitalize/> </td>
    <td>Address :<textarea rows = "3" name="Address" ng-model="Address" capitalize></textarea></td>
	</tr>
    
    <tr>
    <td>City :<input type="text" name = "city" ng-model="city" capitalize></td>
    <td>Email Id : <input type="email" name = "email" ng-model="email"></td>
    <td>Phone :  <input type="text" name = "phoneno" ng-model="phoneno"></td>
	<td>Salary :  <input type="text" name = "sal" ng-model="newemployeemast.sal"></td>
	</tr>
   </table>
   	<a class="btn btn-success" href="#/updtempdata/" ng-click="updtempdata(newemployeemast,city,email,phoneno,Address)">Update</a>
    <a href="#/editemp/" ng-click="cancel()" class="btn">Clear</a>
	<a class="btn btn-info pull-right"  href="#/saveempdata/" ng-click="saveempdata(newemployeemast,Address,city,email,phoneno)">Save</a>
    <input type="text" ng-model="name" class="search-query" placeholder="Search">
     

            <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                         <th>Id</th>
                         <th>Prefix</th>
                         <th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Employee Name</a></th>
                         <th>Address</th>
                         <th>City</th>
                         <th>Phone No</th>
                         <th>Email</th>
                         <th>Designation</th>
						 <th>Monthly Salary</th>
                         <th>Status</th>
                         <th>Delete</th>
                         <th>Edit</th>
                   </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in employeemast | filter: name | orderBy:predicate:reverse | startingFrom:currentPage*pageSize | limitTo:pageSize">
                         <td>{{item.empid}}</td>
                         <td>{{item.prefx}}</td>
                         <td>{{item.empname}}</td>      
                         <td>{{item.Address}}</td> 
                         <td>{{item.city}}</td> 
                         <td>{{item.phoneno}}</td> 
                         <td>{{item.email}}</td> 
                         <td>{{item.designation}}</td>
						 <td>{{item.sal}}</td>
                         <td>{{item.status}}</td>
                         <td><a href="#/deleteemp/" ng-click="deleteemp(item.empid)"> <img src="glyphicons_bin.png" alt="Delete"/></td> 
                    <!--     <td><a href="#/editcust/{{item.custid}}" ng-click="editcust(item.custid)"> <img src="glyphicons_edit.png" alt="Edit"/></td> -->
                         <td><a href="#/editemp/" ng-click="edit(item.empid,item.city,item.email,item.phoneno,item.Address)"> <img src="glyphicons_edit.png" alt="Edit"/></td> 
						 
                    </tr>
               </tbody>
              <!--  <tr ng-show="editId===item.custid" ng-if="editId===item.custid">   <td colspan="7" ng-include src="'editRow.html'"></td>   </tr>-->
			
     </table>
              
             <tfoot>
          Current Page  {{currentPage+1}} of {{Math.ceil(employeemast.length/pageSize)}}
                    <td colspan="6">
		<div class="pagination pull-right">
            <ul>
                        
    <button class="btn btn-inverse" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> « Prev </button>
                                
           <li ng-repeat="n in range(employeemast.length)"  ng-class="{active: n == currentPage}"  ng-click="setPage()">
				<a href ng-bind="n + 1">1</a>
           </li> 
     <button class="btn btn-inverse" ng-disabled="currentPage >= employeemast.length/pageSize - 1" ng-click="currentPage=currentPage+1">Next »  </button>
	 
	 
       </li>
      </ul>
    </div>
  </td>
  </tfoot>
  </div>  
  </body>
</html>
